<template>
  <div class="">
    <div class="tellist">
      <img src="../../public/Snipaste_2023-03-08_14-08-40.png" alt="" />
      <div>
        <h3>{{ menu.title }}</h3>
        <p>{{ menu.description }}</p>
      </div>
    </div>
    <div v-for="item in menu.data" :key="item._id" class="tit">
      <h1 @click="router.push({ path: '/detail', query: { id: item._id } })">
        {{ item.title }}
      </h1>
      <div class="title">
        <img
          :src="item.image.url"
          @error="moveerrorimg"
          v-if="item.image"
          class="titleimg"
        />

        <div>
          <p>{{ item.excerpt }}</p>
          <p>{{ item.createdAt }}</p>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="addHandler" v-show="flag">加载更多...</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getList, mylists } from "../utils/api";
const router = useRouter();
const route = useRoute();
const flag=ref(true)
const menu = reactive({
  data: [],
  title: "",
  description: "",
  createdAt: "",
});

const dataList = reactive({
  id: route.query.id,
  page: "1",
  size: "5",
});

getList(dataList).then((res) => {
  // console.log(res);
  menu.data.push(...res.data.data.list)
    dataList.page=res.data.data.currentPage
    dataList.size=res.data.data.pageSize
});
mylists(dataList.id).then((res) => {
  console.log(res);
  menu.title = res.data.data.title,
    menu.description = res.data.data.description,
    menu.createdAt = res.data.data.createdAt;
});
// 加载更多
const addHandler=()=>{
   dataList.page++
   if (dataList.size==menu.data.length){
    flag.value=false
   }
   getList(dataList).then((res)=>{
    console.log(res);
    menu.data.push(...res.data.data.list)
    dataList.page=res.data.data.currentPage
    dataList.size=res.data.data.pageSize
})
}
</script>

<style lang="scss" scope>
.tit {
  width: 800px;
  background: #fff;
  box-shadow: 0px 0px 5px 1px #ccc;
  margin: 15px auto;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.titleimg {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.tel {
  display: flex;
  width: 400px;
  justify-content: space-around;
}
.tellist {
  width: 800px;
  display: flex;
  margin: auto;
}
.btn {
  width: 80%;
  margin: auto;
}
</style>
